<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  #mycanvas{
    background: skyblue;
  }
</style>
<body>
  <div>
      <canvas id="mycanvas" width="500" height="500">

      </canvas>
  </div>
    <script>
        // canvas html5 新增的画布 

        //1.获取画布元素
        var mycanvas=document.getElementById("mycanvas");
        //2. 获取画笔对象
        var ctx=mycanvas.getContext("2d");

        //3.开始绘制新路径（从新起笔）：
        ctx.beginPath();

        // 画线   画矩形  画圆  画文字  画图片   画视频
        // （1）.画线
        // 1.画笔起始 - 移动位置
        // moveTo(x,y) //x坐标 y坐标
        // 2.画笔目标位置：
        // lineTo(x,y); //x坐标 y坐标
        // 3.stroke()  开始绘制     
        // 4.线的颜色  strokeStyle = 'pink'; 

        // 田字格
        // ctx.moveTo(0,250)
        // ctx.lineTo(500,250)
        // ctx.moveTo(250,0)
        // ctx.lineTo(250,500)
        // ctx.strokeStyle="deeppink";
        // ctx.stroke();
        // 线的六角形
      ctx.moveTo(0,150)
      ctx.lineTo(500,150)
      ctx.moveTo(250,0)
      ctx.lineTo(0,350)
      ctx.lineTo(500,350)
      ctx.lineTo(250,0)
      ctx.moveTo(0,150)
      ctx.lineTo(250,500)
      ctx.lineTo(500,150)
      ctx.lineWidth="5" //线宽
      ctx.strokeStyle="deeppink";
      ctx.stroke();
      // 

      








    </script>
</body>
</html>